<?php
session_start();

if(!isset($_SESSION['username'])){
    header("Location: login.php");
}
?>

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>添加联系人</title>
        <link href="https://cdn.bootcss.com/bootswatch/4.3.1/darkly/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" />
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/style.css">


    </head>

    <body>
        <div class="container">

            <h1 class="text-center mt-5 mb-5">添加联系人</h1>
            <nav class="nav justify-content-end">
                <a class="nav-link disabled" href="#" tabIndex="-1">当前用户：<?php echo $_SESSION['name'] ?></a>
                <a class="nav-link" href="#">我的档案</a>
                <a class="nav-link" href="logout.php">退出</a>
            </nav>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item" aria-current="page"><a href="index.php">首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        添加联系人</li>
                </ol>
            </nav>
            <form action="db-operations.php" method="post" enctype="multipart/form-data">
                <div class="row">

                    <input type="hidden" name="operation" value="new">

                    <div class="col-md-4 col-sm-12">
                        <div class="avatar">
                            <img src="images/person.png" alt="">
                            <input type="file" name="avatar" title="" accept=".png, .jpg, .jpeg" />
                        </div>
                        <div class="text-center mt-3">
                            (点击图片进行更换)
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-12">
                        <div class="form-group">
                            <label for="">编号</label>
                            <input type="text" name="id" class="form-control" value="（自动）" disabled>
                        </div>
                        <div class="form-group">
                            <label for="">姓名</label>
                            <input type="text" name="name" minlength="2" required class="form-control" autocomplete="off">
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" id="inlineCheckbox1" value="0"
                                checked>
                            <label class="form-check-label" for="inlineCheckbox1">男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" id="inlineCheckbox2" value="1">
                            <label class="form-check-label" for="inlineCheckbox2">女</label>
                        </div>
                        <div class="form-group dob-container" style="position: relative;">
                            <label for="">出生日期</label>
                            <input type="text" name="dob" class="form-control" autocomplete="off">

                        </div>
                    </div>

                    <div class="col-md-4 col-sm-12">
                        <div class="form-group">
                            <label for="">电话</label>
                            <input type="text" name="phone" required class="form-control" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="">电邮</label>
                            <input type="email" name="email" class="form-control" autocomplete="off">
                        </div>


                    </div>

                </div>
                <hr>
                <div class="row">
                    <div class="col-md-4 offset-md-4 col-sm-12 text-center mt-5">
                        <button class="btn btn-primary" type="submit">保存</button>
                        <button class="btn btn-primary ml-2" type="reset">清除</button>
                        <a href="index.php" class="btn btn-primary ml-2">取消并返回首页</a>
                    </div>

                </div>

            </form>


        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>

        <script>
        $(function() {
            $("input[name='dob']").datepicker({
                orientation: 'auto',
                language:'zh-CN',
                autoclose: true,
                container: '.dob-container'
            });
            
            $(".avatar input").on("change", function(e) {
                let file = e.target.files[0];
                //获取文件阅读器
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function() {
                    //给img的src设置图片url
                    $(".avatar img").attr("src", this.result);
                }

            });




        });
        </script>
    </body>

</html>